<template>
  <div class="flex py-20 border-b-1 border-solid border-F5F5F5">
    <van-image
      :src="`${IMG_CDN_39}/member/cust_timbre_cover.png`"
      class="w-50 h-50"
    />
    <div class="flex-1 w-0 ml-15">
      <div class="flex items-center">
        <div class="text-15 line-clamp-1">
          {{ item.timbreAnchorName }}
        </div>
        <van-image
          :src="`${IMG_CDN_39}/myHuman/${timbreVersionTagMap[item.timbreVersionType]}_timbre_tag.png`"
          class="flex-shrink-0 mx-5 w-32 h-14"
        />
        <div
          v-if="
            isAssetList &&
            item.timbreTaskStatus === HUMAN_IMG_STATUS_ENUM.SUCCESS
          "
          class="ml-auto"
        >
          <CustomPopover
            v-model:visible="localPopoverVisible"
            placement="bottom-end"
            :offset="[-5, 8]"
          >
            <template #reference>
              <svg-icon
                class="py-5"
                name="icon-gengduocaozuo"
                :size="8"
                color="#666"
              />
            </template>
            <div>
              <div class="w-100 h-45 flex justify-center items-center text-15">
                重命名
              </div>
            </div>
          </CustomPopover>
        </div>
      </div>
      <div class="mt-12 text-13 text-999999">
        创建时间：{{ item.createTime }}
      </div>
      <!-- 极速版音色或者无匹配步骤状态文本 .. 显示为生成中 -->
      <div
        v-if="item.timbreTaskStatus === HUMAN_IMG_STATUS_ENUM.SUCCESS"
        class="px-6 h-22 leading-22 rounded-4 text-17B459 c-bg-17B459-10 text-13 max-w-max mt-12"
      >
        生成中
      </div>
      <!-- 其他情况则显示对应训练步骤文本 -->
      <div
        v-if="item.timbreTaskStatus === HUMAN_IMG_STATUS_ENUM.MAKING"
        class="flex items-center justify-between mt-12"
      >
        <div
          v-if="
            item.timbreVersionType === TIMBRE_VERSION_ENUM.SPEED ||
            !TIMBRE_STAGE_STATUS_TEXT[item.timbreTaskStageV2]
          "
          class="px-6 h-22 leading-22 rounded-4 text-4D00FF bg-E2E0FF text-13"
        >
          {{ TIMBRE_STAGE_STATUS_TEXT[item.timbreTaskStageV2] }}
        </div>
        <div
          v-if="item.timbreTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.CONFIRM"
          class="w-60 h-28 text-12 leading-28 c-linear-purple rounded-4 text-white text-center"
        >
          确认效果
        </div>
      </div>
      <div
        v-if="item.timbreTaskStatus === HUMAN_IMG_STATUS_ENUM.FAIL"
        class="px-6 h-22 leading-22 rounded-4 text-FF4A35 c-bg-FF4A35-10 text-13 max-w-max mt-12"
      >
        生成失败
      </div>
      <div
        v-if="item.timbreTaskStatus === HUMAN_IMG_STATUS_ENUM.FAIL"
        class="w-full mt-12 text-13"
      >
        <TextExpand :content="`失败原因：${item.timbreTaskFailMessage}`" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from "vue";
import {
  HUMAN_IMG_STATUS_ENUM,
  HUMAN_STAGE_STATUS_ENUM,
  TIMBRE_VERSION_ENUM
} from "@/enums";
import { IMG_CDN_39, TIMBRE_STAGE_STATUS_TEXT } from "@/constants";
import CustomPopover from "@/components/CustomPopover/index.vue";
import type { TimbreInfoData } from "@/api/MyHuman";

const props = defineProps({
  item: {
    type: Object as PropType<TimbreInfoData>,
    required: true
  },
  popoverVisible: {
    type: Boolean,
    default: false
  },
  /** 当前为资产列表(即在我的数字人页的列表) */
  isAssetList: {
    type: Boolean,
    value: false
  }
});

const emit = defineEmits<{
  (e: "update:popoverVisible", value: boolean): void;
}>();

// 创建本地响应式变量
const localPopoverVisible = ref(props.popoverVisible);

// 监听父组件传入的 popoverVisible 变化
watch(
  () => props.popoverVisible,
  newVal => {
    localPopoverVisible.value = newVal;
  }
);

// 监听本地变量变化并通知父组件
watch(localPopoverVisible, newVal => {
  emit("update:popoverVisible", newVal);
});

// 音色版本标签映射
const timbreVersionTagMap: Record<number, string> = {
  [TIMBRE_VERSION_ENUM.SPEED]: "speed",
  [TIMBRE_VERSION_ENUM.EXCLUSIVE]: "exclusive"
};
</script>
